<template>
  <div>
    <HyTable
      :listdata="userList"
      v-bind="contentTableConfig"
      v-model:page="pageInfo"
    >
      <!-- header中的插槽 -->
      <template #headerHandler>
        <el-button type="danger">删除</el-button>
        <el-button
          type="primary"
          @click="handleNew()"
          v-if="contentTableConfig?.showNew"
          >新建员工</el-button
        >
        <el-button type="primary">刷新</el-button>
      </template>

      <!-- 列中的插槽 -->
      <template #status="scope">
        <el-button plain :type="scope.row.isdelete ? 'danger' : 'success'">{{
          scope.row.isdelete ? "禁用" : "启用"
        }}</el-button>
      </template>
      <template #handler="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button size="small" type="danger" @click="handleDelete(scope.row)"
          >删除</el-button
        >
        <!-- <el-button
          icon="el-icon-edit"
          size="mini"
          type="text"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="text"
          @click="handleDelete(scope.row)"
          >删除</el-button
        > -->
      </template>
      <!-- <template #imageSlot="scope">
          <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.photo"
          :preview-src-list="[scope.row.photo]"
          fit="cover"
        />

        </template> -->
      <template #handlerimg="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="
            'https://reclaim-me.oss-cn-shenzhen.aliyuncs.com/' + scope.row.photo
          "
          :preview-src-list="[scope.row.photo]"
          fit="cover"
        />
      </template>
      <!-- 在page- content中动态获取插入剩余的插槽 -->
      <!-- <template
        v-for="item in otherPropsSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template> -->
    </HyTable>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, computed, watch } from "vue";
import { useStore } from "vuex";
import { defineComponent } from "vue";
import HyTable from "@/base-ui/table";
export default defineComponent({
  props: {
    contentTableConfig: {
      type: Object,
      require: true
    }
  },
  components: {
    HyTable
  },
  emits: ["newBtnClick", "editBtnClick"],
  setup(props, { emit }) {
    const store = useStore();
    // 双向绑定pageinfo
    const pageInfo = ref({ currentPage: 1, pageSize: 5 });
    // const username = props.contentTableConfig;
    // 监听pageinfo的变化,发送请求
    watch(pageInfo, () => getPageData());
    // 发送网络请求
    const getPageData = (queryinfo: any = {}) => {
      console.log(props.contentTableConfig?.Request_name);
      switch (props.contentTableConfig?.Request_name) {
        case "cart":
          store.dispatch("product/getOrderLimit", {
            pageNo: pageInfo.value.currentPage,
            pageSize: pageInfo.value.pageSize
          });
          break;
        case "user":
          store.dispatch("system/getemployeeCountAction", {
            queryinfo: {
              start: pageInfo.value.currentPage,
              end: pageInfo.value.pageSize
              // 也可以追加属性
              // ...queryinfo
              // start: 0, offset: pageInfo.value.currentPage * pageInfo.value.pageSize,
              // end: 3, size: pageInfo.pageSize
            }
          });
          break;
      }
    };
    getPageData(props.contentTableConfig);
    // 删除/修改/新建逻辑
    const handleDelete = (item: any) => {
      store.dispatch("system/deletePageDateAction", {
        id: item.id
      });
    };
    const handleNew = (item: any) => {
      emit("newBtnClick");
    };
    const handleEdit = (id: number, item: any) => {
      emit("editBtnClick", item);
    };
    let userList = computed(() => store.state.system.userList);
    switch (props.contentTableConfig?.Request_name) {
      case "cart":
        // const userList = computed(() => store.state.system.userList);
        userList = computed(() => store.state.product.orderList);
        break;
      case "user":
        // 员工列表数据
        userList = computed(() => store.state.system.userList);
        break;
    }

    // 获取其他动态插槽名称
    const otherPropsSlots = props.contentTableConfig?.propList.filter(
      (item: any) => {
        if (item.slotName == "status") return false;
        if (item.slotName == "handler") return false;
        return true;
      }
    );
    // const centerDialogVisible
    return {
      userList,
      handleDelete,
      getPageData,
      pageInfo,
      otherPropsSlots,
      handleEdit,
      handleNew
      // username
      // centerDialogVisible
    };
  }
});
</script>
<style scoped></style>
